<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root">
        <h1>你好,{{name}}</h1>
        <h2>我的年龄是:{{age}}</h2>
    </div>
    {{name}}
    <script>
        // 在这个案例中，我们使用的x也是多余的，可以去掉
        // var x = new Vue({
    const app =  new Vue({
            // 这里传递只有两个配置对象
            el: '#root', //多组key-value之间用,进行分隔
            // 把数据维护好，以后从这里拿数据给容器就行
            // data:'世界&25'  这样错误写法比较麻烦
            data: { // data中用于存储数据，数据供el所指定的容器去使用,值暂时先写成一个对象，讲到组件的时候，得写成一个函数
                name: '世界',
                age: 25
            }
        })
    </script>
</body>

</html>